<!--
 * @Description: 生产任务单明细
 * 
 * @Author: Edan<Edan>
 * @Date: 2024-07-19 09:49:19
 * @FilePath: /yuxiuproweb/src/views/qb/qb/mods/add.vue
-->

<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="title"
    :visible.sync="shows"
    width="60vw"
    append-to-body
  >
    <!-- direction="vertical" -->
    <el-descriptions
      border
      :column="2"
      :size="'medium'"
      :label-style="label_style"
      :contentStyle="content_style"
    >
      <el-descriptions-item label="到货单号" label-class-name="myLabel">
        <span>{{ form.arrivalNoteNumber }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="到货明细" label-class-name="myLabel">
        <span>{{ form.arrivalNoteItemId }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="供应商" label-class-name="myLabel">
        <el-select
          v-if="form.state == 0"
          v-model="form.supplier"
          placeholder="请选择供应商名称"
          style="width: 100%"
          clearable
          filterable
          remote
          reserve-keyword
          :remote-method="getSupplierData"
          @change="changeSupplier"
          @clear="
            form.supplier = '';
            form.supplierId = '';
          "
        >
          <el-option
            v-for="item in supplierData"
            :key="item.vendorId"
            :label="item.vendorName"
            :value="item.vendorName"
          >
            <span style="padding-left: 6px">{{ item.vendorName }}</span>
          </el-option>
        </el-select>
        <span v-else>{{ form.supplier }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="状态" label-class-name="myLabel">
        <span v-if="form.state == 0">待验</span>
        <span v-if="form.state == 1">入库</span>
        <span v-if="form.state == 2">退货</span>
        <span v-if="form.state == 3">协商</span>
      </el-descriptions-item>

      <el-descriptions-item label="存货编码" label-class-name="myLabel">
        <span>{{ form.codeNumber }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="型号" label-class-name="myLabel">
        <span>{{ form.modelNumber }}</span>
      </el-descriptions-item>

      <el-descriptions-item label="到货数量" label-class-name="myLabel">
        <span>{{ form.quantity }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="批号" label-class-name="myLabel">
        <span>{{ form.batchNumber }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="入库量" label-class-name="myLabel">
        <el-input
          v-if="form.state == 0"
          v-model="form.inventoryQuantity"
          placeholder="入库量"
          type="input"
        />
        <span v-else>{{ form.inventoryQuantity }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="退库量" label-class-name="myLabel">
        <span>{{ form.returnQuantity }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="实际入库量" label-class-name="myLabel">
        <span>{{ form.realityInventoryQuantity }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="质检" label-class-name="myLabel">
        <span>{{ form.qualityStatus }}</span>
      </el-descriptions-item>

      <!--     
      <el-descriptions-item label="物流单号" label-class-name="myLabel">
        <el-input
          v-model="form.logisticsNumber"
          placeholder="请输入物流单号"
          type="input"
        />
      </el-descriptions-item> -->

      <el-descriptions-item label="备注" label-class-name="myLabel" :span="2">
        <el-input
          v-if="form.state == 0"
          v-model="form.itemRemark"
          placeholder="请输入备注"
          type="textarea"
          :rows="2"
        />
        <span v-else>{{ form.itemRemark }}</span>
      </el-descriptions-item>
      <el-descriptions-item
        label="操作"
        label-class-name="myLabel"
        v-if="form.state == 0"
      >
        <div class="">
          <el-button size="default" type="success" @click="submitForm"
            >保存</el-button
          >
          <el-button size="default" @click="shows = false">关闭</el-button>
        </div>
      </el-descriptions-item>
    </el-descriptions>
    <!--  -->
  </el-dialog>
</template>

<script>
import { putIsUrgent } from "@/api/buys/qbbuyarrival";
import { listVendor } from "@/api/mes/md/vendor";
export default {
  components: {},
  props: {
    show: Boolean,
    data: {
      type: Object,
    },
  },
  data() {
    return {
      // 表单参数
      form: {},
      list: [],
      title: "到货单",
      label_style: {
        "text-align": "center", //文本居中
        "font-weight": "600",
        width: "140px",
        "word-break": "keep-all",
        padding: "6px",
      },
      content_style: {
        "min-width": "200px",
        "word-break": "break-all", //过长时自动换行
      },
      supplierData: [],
    };
  },
  computed: {
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  async mounted() {
    this.getList();
    this.getSupplierData();
  },
  methods: {
    getList() {
      this.form = Object.assign({}, this.data);
      this.title = this.form.billtype == 0 ? "验布单" : "到货单";
      console.log("form", this.form);
    },
    /** 提交按钮 */
    submitForm() {
      putIsUrgent(this.form).then((res) => {
        this.$modal.msgSuccess(res.msg || "修改成功");
        this.shows = false;
        this.$emit("update");
      });
    },
    getSupplierData(vendorName = "") {
      listVendor({
        pageNum: 1,
        pageSize: 100,
        vendorName,
      }).then(({ rows }) => {
        this.supplierData = rows;
      });
    },
    changeSupplier(val) {
      var index = this.supplierData.findIndex((a) => a.vendorId == val);
      if (index != -1) {
        this.form.supplierId = this.supplierData[index].vendorId;
        this.form.supplier = this.supplierData[index].vendorName;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-form-item {
    input {
      text-align: left;
    }
  }
}
::v-deep .myLabel {
  font-weight: bold;
  font-size: 14px;
  color: #515a6e;
}
::v-deep .operateLabel {
  background: #faecd8;
  //e1f3d8 faecd8 79bbff
}
::v-deep .el-dialog__body {
  padding: 10px 20px !important;
}
</style>
